<template>
	<view>
		<!-- 头部 -->
		<navber id="head-navber" :navbarData="navbarData">
		</navber>

		<!-- 地址 -->
		<view class="address">
			<view class="address-img">
				<image :src="(imgUrl)+'/imgs/submitOrder/'+(userAddress.take_phone?'have_data':'not_data')+'.png'">
				</image>
			</view>
			<view class="address-info">
				<view class="address-info-np" v-if="userAddress.take_phone">
					<view class="address-info-np-name">{{userAddress.take_name}}</view>
					<view class="address-info-np-phone">{{userAddress.take_phone}}</view>
				</view>
				<view class="address-info-detail" v-if="userAddress.take_phone">
					{{userAddress.take_address}}
				</view>
			</view>
		</view>

		<view class="but">
			<van-tabs swipe-threshold="3" color="#FFDC8D" :active="activeIndex" @change="selectLabel"
				v-if="logisticsData.list.length>0">
				<van-tab :title="'包裹'+(index+1)" :name="activeIndex" v-for="(item,index) in (logisticsData.list)"
					:key="index">
				</van-tab>
			</van-tabs>
			<view class="but-bg-hr" v-if="logisticsData.list.length>0"></view>
			<view class="logistics" @tap="getLogistics" v-if="logisticsData.list.length>0">
				<view class="logistics-img">
					<image :src="(imgUrl)+'/imgs/user/logistics_icon.png'"></image>
				</view>
				<view class="logistics-info">
					<view class="logistics-info-np">
						<view class="logistics-info-np-name">{{logisticsData.traces.AcceptStation}}</view>
					</view>
					<view class="logistics-info-detail">
						{{logisticsData.traces.AcceptTime}}
					</view>
				</view>
				<view class="logistics-img-select">
					<image :src="(imgUrl)+'/imgs/user/logistics_select.png'"></image>
				</view>
			</view>
			<view class="order-item" v-if="logisticsData.list">
				<view class="order-item-head">
					<view class="order-item-time">
						包裹内含以下 {{logisticsData.list[activeIndex].item_list.length}}个商品
					</view>
				</view>
				<view class="order-item-layer" v-for="(itemx,indexx) in (logisticsData.list[activeIndex].item_list)"
					:key="indexx">
					<view class="order-item-img" @tap="goodsDetail($event, { goods_id:itemx.goods_id })">
						<image mode="aspectFill" :src="itemx.goods_img"></image>
					</view>
					<view class="order-item-info">
						<view class="order-item-info-title" @tap="goodsDetail($event, { goods_id:itemx.goods_id })">
							{{itemx.goods_title}}
						</view>
						<view class="order-item-info-pn">
							<view class="order-item-info-pn-price">
								<span class="tip">¥</span>{{itemx.goods_price}}
							</view>
							<view class="order-item-info-pn-number">
								<span class="tip">X</span>{{itemx.now_send_number}}
							</view>
						</view>
					</view>
				</view>


			</view>
		</view>

	</view>
</template>

<script>
	import navber from "@/components/navber/index";

	const Config = require('../../../../config/index.js');

	const Api = require('../../../../api/index.js');

	export default {
		components: {
			navber,

		},
		data() {
			return {
				navbarData: {
					title: '物流列表' //顶部标题

				},

				//导航栏
				imgUrl: Config.imgUrl,

				//图片url
				order: {},

				//订单详情
				userAddress: {
					take_phone: false,
					take_name: "",
					take_address: ""
				},

				order_id: "",
				butCheck: "111",
				activeIndex: 0,
				logisticsData: [],
				type: "",
				AcceptStation: "",
				AcceptTime: ""
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			var id = options.id;
			this.setData({
				order_id: id,
				type: 'logistics'
			});
			this.orderDetail(id);
		},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			this.orderDetail(this.order_id);
			uni.stopPullDownRefresh();
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			getLogistics(e, _dataset) {
				
				if (!e.currentTarget) {
					if (_dataSet.tagId) {
						e.currentTarget = {
							id: _dataSet.tagId
						}
					} else {
						e.currentTarget = {
							dataset: _dataSet
						}
					}
				}
				
				var logistics_id = this.logisticsData.list[this.activeIndex].id;
				console.log(logistics_id);
				uni.navigateTo({
					url: '/pages/user/order/logistics/index?id=' + this.order_id + "&index=" + this.activeIndex +
						"&lid=" + logistics_id
				});
			},

			selectLabel(event, _dataset) {
				
				if (!event.currentTarget) {
					if (_dataSet.tagId) {
						event.currentTarget = {
							id: _dataSet.tagId
						}
					} else {
						event.currentTarget = {
							dataset: _dataSet
						}
					}
				}
				
				var index = event.detail.index;
				this.setData({
					activeIndex: index
				}); //选择项

				var logistics_id = this.logisticsData.list[activeIndex].id;
				var json = {
					id: this.order_id,
					logistics_id: logistics_id
				};
				Api.userOrderDetail(json).then(res => {
					if (res.code == 1) {
						var data = res.data;
						this.setData({
							logisticsData: data.logistics
						});
					} else {
						uni.showToast({
							title: '订单信息有误',
							icon: 'none',
							duration: 2000
						});
					}
				});
			},

			orderDetail(id) {
				// 订单详情
				var json = {
					id: id
				};
				Api.userOrderDetail(json).then(res => {
					if (res.code == 1) {
						var data = res.data;
						var user_address = {
							take_name: data.take_name,
							take_address: data.take_address,
							take_phone: data.take_phone
						};
						this.setData({
							order: data,
							logisticsData: data.logistics,
							userAddress: user_address
						});
						console.log(res, this.logisticsData);
					} else {
						uni.showToast({
							title: '订单信息有误',
							icon: 'none',
							duration: 2000
						});
					}
				});
			},

			goodsDetail(e, _dataset) {
				
				if (!e.currentTarget) {
					if (_dataSet.tagId) {
						e.currentTarget = {
							id: _dataSet.tagId
						}
					} else {
						e.currentTarget = {
							dataset: _dataSet
						}
					}
				}
				
				console.log("占位：函数 goodsDetail 未声明");
			}
		}
	};
</script>
<style>
	@import "./index.css";
</style>
